<template>
  <div class="demo">
    <div class="demo-title">预设范围</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker.RangePicker v-model:value="value1" :ranges="ranges" />
        <DatePicker.RangePicker
          v-model:value="value2"
          style="width: 400px"
          :ranges="ranges"
          show-time
          format="YYYY/MM/DD HH:mm:ss"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  type RangeValue = [Dayjs, Dayjs];
  const value1 = ref<RangeValue>();
  const value2 = ref<RangeValue>();
  const ranges = {
    Today: [dayjs(), dayjs()] as RangeValue,
    'This Month': [dayjs(), dayjs().endOf('month')] as RangeValue,
  };
</script>
